<template>
  <view class="page">
    <!-- 顶部用户信息 -->
    <view class="header">
      <view class="user-box">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
        <view class="user-info">
          <text class="name">{{ userInfo.nickname }}</text>
          <view class="info-row">
            <view class="coupon-box" @tap="goToCoupons">
              <view class="coupon-count">
                <text class="num">{{ userInfo.couponCount || 0 }}</text>
                <text class="label">张优惠券</text>
              </view>
              <view class="coupon-arrow">
                <text class="tip">去使用</text>
                <wd-icon name="arrow-right" size="24rpx" color="#999" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单入口 -->
    <view class="menu-box">
      <view class="menu-header">
        <text>我的订单</text>
        <view class="more" @tap="goToOrderList('0')">
          查看全部
          <wd-icon name="arrow-right" size="24rpx" />
        </view>
      </view>
      <view class="menu-grid">
        <view class="grid-item" v-for="(item, index) in orderTypes" :key="index" @tap="goToOrderList(item.type)">
          <view class="icon-wrap">
            <wd-badge v-model="item.count" max="99">
              <image :src="item.icon" class="menu-icon" mode="aspectFit" />
            </wd-badge>
          </view>
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="function-list">
      <view class="function-item" v-for="(item, index) in functionList" :key="index"
        @tap="item.type !== 'service' ? handleFunction(item.type) : null">
        <view class="left">
          <image :src="item.icon" class="function-icon" mode="aspectFit" />
          <text>{{ item.name }}</text>
        </view>
        <wd-icon name="arrow-right" size="24rpx" color="#999" />
        <wd-button v-if="item.type === 'service'" type="info" size="large" open-type="contact"
          custom-class="transparent-contact-btn" hover-class="none"
          :custom-style="{ opacity: 0, background: 'transparent' }">
          联系客服
        </wd-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getUserHomeInfo } from '@/api/user'

// 用户数据
const userInfo = ref({})
const orderTypes = ref([])
const functionList = ref([])

// 初始化用户数据
const initUserData = async () => {
  try {
    const data = await getUserHomeInfo()

    // 更新用户信息
    userInfo.value = {
      nickname: data.nickname,
      avatar: data.avatar,
      couponCount: data.couponCount
    }

    // 更新订单类型数据
    orderTypes.value = [
      { name: '待付款', icon: '/static/images/order/unpaid.png', type: '1', count: data.pendingPaymentOrderCount },
      { name: '待发货', icon: '/static/images/order/unshipped.png', type: '2', count: data.pendingDeliveryOrderCount },
      { name: '待收货', icon: '/static/images/order/unreceived.png', type: '3', count: data.pendingReceiptOrderCount },
      { name: '待自提', icon: '/static/images/order/pickup.png', type: '4', count: data.pendingPickupOrderCount },
      { name: '待评价', icon: '/static/images/order/comment.png', type: '5', count: data.pendingEvaluationOrderCount },
      { name: '退款/售后', icon: '/static/images/order/refund.png', type: '6', count: data.refundOrderCount }
    ]

    // { name: '我的收藏', icon: '/static/images/function/favorite.png', type: 'favorite' },
    // 保持原有的功能列表不变
    functionList.value = [
      { name: '收货地址', icon: '/static/images/function/address.png', type: 'address' },
      { name: '线下门店', icon: '/static/images/function/store.png', type: 'store' },
      { name: '联系客服', icon: '/static/images/function/service.png', type: 'service' },
      { name: '设置', icon: '/static/images/function/settings.png', type: 'settings' }
    ]
  } catch (error) {
    console.error('获取用户信息失败:', error)
    uni.showToast({
      title: '获取用户信息失败',
      icon: 'none'
    })
  }
}

onShow(() => {
  initUserData()
})

const goToOrderList = (type) => {
  uni.navigateTo({
    url: `/pages/order/list?type=${type}`
  })
}

const handleFunction = (type) => {
  const routes = {
    address: '/pages/address/list',
    favorite: '/pages/favorite/list',
    service: '/pages/service/index',
    store: '/pages/store/list',
    settings: '/pages/settings/index'
  }
  if (routes[type]) {
    uni.navigateTo({
      url: routes[type]
    })
  }
}

// 添加跳转到优惠券页面的方法
const goToCoupons = () => {
  uni.navigateTo({
    url: '/pages/coupon/list'
  })
}
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.header {
  background: linear-gradient(135deg, #3c3a38 0%, #2f2d2b 100%);
  padding: 60rpx 30rpx 40rpx;
  margin-bottom: 20rpx;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 180, 99, 0.15));
  }

  .user-box {
    display: flex;
    align-items: center;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      margin-right: 30rpx;
      border: 4rpx solid rgba(216, 180, 99, 0.12);
    }

    .user-info {
      flex: 1;
      min-width: 0;

      .name {
        font-size: 36rpx;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 20rpx;
      }

      .info-row {
        .coupon-box {
          background: rgba(255, 255, 255, 0.9);
          border-radius: 28rpx;
          margin-top: 16rpx;
          padding: 14rpx 24rpx;
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 90%;

          .coupon-count {
            display: flex;
            align-items: center;
            flex-shrink: 0;

            .num {
              font-size: 32rpx;
              font-weight: 600;
              color: #c4b087;
              line-height: 1;
              margin-right: 6rpx;
            }

            .label {
              font-size: 24rpx;
              color: #666;
              line-height: 1;
            }
          }

          .coupon-arrow {
            display: flex;
            align-items: center;
            margin-left: 20rpx;
            flex-shrink: 0;

            .tip {
              font-size: 22rpx;
              color: #999;
              margin-right: 6rpx;
              line-height: 1;
            }
          }
        }
      }
    }
  }
}

.menu-box {
  background: #fff;
  border-radius: 16rpx;
  margin: 0 20rpx 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);

  .menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    padding: 0 10rpx;

    text {
      font-size: 32rpx;
      font-weight: bold;
    }

    .more {
      font-size: 26rpx;
      color: #666;
    }
  }

  .menu-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .grid-item {
      width: 16.666%;
      text-align: center;
      padding: 10rpx 0;

      .icon-wrap {
        margin-bottom: 12rpx;

        .menu-icon {
          width: 48rpx;
          height: 48rpx;
        }
      }

      text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.function-list {
  background: #fff;
  border-radius: 16rpx;
  margin: 0 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.02);

  .transparent-contact-btn {
    background-color: transparent !important;
    color: transparent !important;
    border: none !important;
    width: 100% !important;
    position: absolute !important;
    z-index: 10 !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;

    &::after {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      opacity: 0 !important;
    }
  }

  .function-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 30rpx;
    position: relative;

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 30rpx;
      right: 30rpx;
      bottom: 0;
      height: 1px;
      background: #f5f5f5;
    }

    .left {
      display: flex;
      align-items: center;

      .function-icon {
        width: 44rpx;
        height: 44rpx;
        margin-right: 24rpx;
      }

      text {
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}
</style>